<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>类式组件</title>
        <style>
            header {
                height: 100px;
                background: #aef;
            }
            main {
                height: 400px;
                background: #fec;
            }
            footer {
                height: 100px;
                background: rgb(30, 128, 69);
            }
        </style>
    </head>
    <body>
        <div id="root"></div>

        <script src="../js/react.development.js"></script>
        <script src="../js/react-dom.development.js"></script>
        <script src="../js/babel.min.js"></script>

        <script type="text/babel">
            //类式组件
            class Top extends React.Component{
                //这里 render 的名字是固定的
                render(){
                    return <header></header>;
                }
            }

            //内容区组件
            class Main extends React.Component{
                //这里 render 的名字是固定的
                render(){
                    return <main></main>;
                }
            }

            //尾部区组件
            class Footer extends React.Component{
                render(){
                    return <footer></footer>;
                }
            }

            //创建虚拟 DOM 对象
            // <Top></Top>  寻找与 Top 同名的类, 实例化对象, 并调用 render 方法得到虚拟 DOM 对象, 最终渲染
            class App extends React.Component{
                render(){
                    return <div>
                                <Top></Top>
                                <Main />
                                <Footer/>
                            </div>
                }
            }

            ReactDOM.render(<App />, document.querySelector("#root"));
        </script>
    </body>
</html>
